<template>
  <div class="i18n">
    <h1>i18n</h1>
    <h2>{{ $t('app.welcome') }}</h2>
    <button @click="switchLanguage('zh-CN')">简体中文</button>
    <button @click="switchLanguage('zh-HK')">繁体中文</button>
    <button @click="switchLanguage('en')">English</button>
    <!-- <div>{{ locales }}</div> -->
    <hr>
    <div>{{availableLocales}}</div>
  </div>
</template>

<script setup>
import {ref, onMounted } from 'vue';
const { locale, locales, t, setLocale } = useI18n();

const switchLanguage = (lang) => {
  localStorage.setItem('user-locale', lang);
  setLocale(lang)
};


const localeName = ref("");
const availableLocales = computed(() => {
  if (locales.value && locale.value) {
    localeName.value = locales.value.find(i => i.code === locale.value)?.name ?? "";
    return locales.value.filter(i => i.code !== locale.value);
  }
  return [];
});

onMounted(() => {

});

</script>

<style scoped>
/* 样式内容 */
</style>